<template>
  <el-dialog v-model="dialogFormVisible" :title="(isModify ? '修改' : '新增') + '凭证'">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="凭证名称：" prop="name">
        <el-input v-model="form.name" autocomplete="off" style="width: 260px" clearable />
      </el-form-item>
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="form.username" autocomplete="off" style="width: 260px" clearable />
      </el-form-item>
      <el-form-item label="管理密码：" prop="password">
        <el-input v-model="form.password" autocomplete="off" style="width: 260px" show-password clearable />
      </el-form-item>
      <el-form-item label="补充凭证数据：" prop="meta">
        <el-input v-model="form.meta" autocomplete="off" style="width: 260px" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveProof">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import StoreProof from "@/store/StoreProof"

export default {
  name: 'ProofForm',
  data() {
    return {
      dialogFormVisible: false,
      isModify: false,
      form: {
      },
      rules: {
        name: [
          { required: true, message: '请输入凭证名称', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入管理密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /**
     * 显示窗口.
     * @param isModify {boolean}
     * @param proof {Object}
     */
    show(isModify, proof) {
      this.isModify = isModify
      this.form = Object.assign({}, proof)
      this.dialogFormVisible = true
    },
    /**
     * 保存凭证.
     */
    saveProof() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const id = this.form.id
          const updateData = Object.assign(this.form, {})
          if (this.isModify) {
            delete updateData.id
            StoreProof.update(updateData, {id: id})
          } else {
            console.log('save data', updateData)
            StoreProof.insert(updateData)
          }
          this.$message.success('保存成功')
          this.dialogFormVisible = false
          this.$emit('refresh', {})
        }
      })
    }
  },
  mounted() {
    StoreProof.init(this)
  }
}
</script>

<style scoped>

</style>